<template>
  <div class="login-big-box">
    <div v-show="codeShow" class="login_container_box">
      <div class="login_container_middle">
        <span>
            <i class="el-icon-close close_code" @click="closeCode"></i>
           <div id="login_container"></div>
        </span>
       
      </div>
    </div>
    <div class="carousel">
      <!-- 导航小圆点 -->
      <ul class="ul-box">
        <li
          :class="navIndex === index ? 'active' : ''"
          @click="clickNav(index)"
          v-for="(item, index) in 4"
          :key="index"
        ></li>
      </ul>
      <full-page :options="options" ref="fullpage" id="fullpage">
        <!-- first -->
        <div class="section firstPart">
          <!-- 顶部信息 -->
          <div class="top">
            <div class="box">
              欢迎光临数字化供应链生态网！新的商业模式和专业服务的一流平台！
              <p>
                <!-- <span>新手引导&nbsp;</span>
                <span> | </span>
                <span> &nbsp;帮助中心</span> -->
              </p>
            </div>
          </div>
          <!-- 头部信息 -->
          <div class="head">
            <div
              class="box"
              @mouseover="mouseOverIcon"
              @mouseout="mouseOutIcon"
            >
              <img class="logo-title" :src="logoImg" alt="logon" />
              <!-- <p><span>客服热线：</span><span>010-11211200</span></p> -->
            </div>
          </div>
          <!-- 登录组件 -->
          <div class="fristContent">
            <div class="introduce">
              <p>数字化供应链生态平台</p>
              <p>SHUZIHUAGONGYINGLIANSHENGTAIPINGTAI</p>
              <p>
                医疗器械数字化供应链生态服务平台通过整合互联网、物联网、大数据、人工智能、区块链等最新的信息化技术等来响应国家供应链降本增效的号召，推动医疗器械产业内部资源整合，为企业快速响应市场变幻而赋能。
              </p>
            </div>
            <loginInfo @codeShow="codeShowFn"></loginInfo>
          </div>
        </div>
        <!-- second -->
        <div class="section secondPart">
          <div class="_title">
            <p>平台优势</p>
            <p>商业模式 安全可靠</p>
          </div>
          <div class="platformWaves">
            <!-- <img :src="img.pingtaiyoushiFront" alt="平台优势" /> -->
          </div>
          <div class="secondContent">
            <img :src="img.pingtaiyoushi" alt="平台优势" />
            <ul>
              <li>
                <transition name="slide-fade">
                  <div v-if="show">
                    <p class="title">商业模式</p>
                    <p>创建新的商业模式 赋能于合作伙伴</p>
                  </div>
                </transition>
              </li>
              <li>
                <transition name="slide-fade">
                  <div v-if="show">
                    <p class="title">安全可靠</p>
                    <p>依托强大的背景资源和资金支持</p>
                  </div>
                </transition>
              </li>
              <li>
                <transition name="slide-fade">
                  <div v-if="show">
                    <p class="title">专业团队</p>
                    <p>专业的产品、技术、运营团队</p>
                  </div>
                </transition>
              </li>
              <li>
                <transition name="slide-fade">
                  <div v-if="show">
                    <p class="title">丰富的产品内容</p>
                    <p>覆盖全渠道全过程的应用产品</p>
                  </div>
                </transition>
              </li>
            </ul>
          </div>
        </div>
        <!-- third -->
        <div class="section thirdPart">
          <div class="_title">
            <p>平台产品</p>
            <p>产品多样化 多种服务内容</p>
          </div>
          <ul>
            <li>
              <el-image fit="fill" :src="img.qudao"></el-image>
              <div>
                <p>渠道服务</p>
                <p>渠道管理 背调管理</p>
                <p>合同管理 产品授权</p>
                <p>培训考试 政策管理</p>
                <p>......</p>
              </div>
            </li>
            <li>
              <el-image fit="fill" :src="img.yuanchang"></el-image>
              <div>
                <p>原厂服务</p>
                <p>报台管理 仓储管理</p>
                <p>销售管理 财务管理</p>
                <p>订单可视化</p>
                <p>......</p>
              </div>
            </li>
            <li>
              <el-image fit="fill" :src="img.cso"></el-image>
              <div>
                <p>CSO服务</p>
                <p>服务凭证管理</p>
                <p>......</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
              </div>
            </li>
            <li>
              <el-image fit="fill" :src="img.b2b"></el-image>
              <div>
                <p>B2B医疗器械商城服务</p>
                <p>产品上下架</p>
                <p>订单管理 配送商管理</p>
                <p>退换货管理 支付对账管理</p>
                <p>......</p>
              </div>
            </li>
            <li>
              <el-image fit="fill" :src="img.jingxiaoshang"></el-image>
              <div>
                <p>经销商服务</p>
                <p>采购管理 销售管理</p>
                <p>仓储管理 财务管理</p>
                <p>订单管理</p>
                <p>......</p>
              </div>
            </li>
            <li>
              <el-image fit="fill" :src="img.peisongshang"></el-image>
              <div>
                <p>配送商服务</p>
                <p>采购管理 销售管理</p>
                <p>仓储管理 财务管理</p>
                <p>订单管理 配送准入管理</p>
                <p>......</p>
              </div>
            </li>
          </ul>
          <!-- <div class="footer">Copyright © 2020 数字化供应链生态平台</div> -->
        </div>
        <!-- fourth -->
        <div class="section fp-auto-height fourthPart">
          <p class="_title">
            <span>增值电信业务许可EDI，增值电信业务许可ICP：京B2-20201227</span>
            <span>互联网药品信息服务资格证书编号: (京)-经营性2019-0053</span>
          </p>
          <p class="footer">Copyright © 2020 数字化供应链生态平台</p>
        </div>
       
      </full-page>
    </div>
   
  </div>
</template>
<script>
import loginInfo from '@/moduleComponents/login/hospital/loginInfo.vue';
import cookie from 'js-cookie';
import { loginByOpenPlatformCode } from '@const/api_staffCenter.js';
export default {
  layout: 'blank',
  name: 'Login',
  components: {
    loginInfo
  },
  data() {
    return {
      options: {
        licenseKey: null,
        // sectionsColor: ["#aaa","#ddd","#fafa"],
        // 整屏插件vue-fullpage选项
        licenseKey: null,
        afterLoad: this.afterLoad, // 滚动到某一屏后的回调函数
        scrollOverflow: false, // 内容超过满屏后显示滚动条
        onLeave: this.onLeave, // 滚动前的回调函数
        scrollingSpeed: 1000
      },
      navIndex: 0,
      show: false,
      img: {
        qudao: require('@assets/img/home/qudaofuwu.png'),
        b2b: require('@assets/img/home/b2byiliaoqixie.png'),
        cso: require('@assets/img/home/csofuwu.png'),
        jingxiaoshang: require('@assets/img/home/jingxiaoshang.png'),
        peisongshang: require('@assets/img/home/peisongsang.png'),
        yuanchang: require('@assets/img/home/yuanchangfuwu.png'),
        pingtaiyoushi: require('@assets/img/home/secondpagecenter.png'),
        pingtaiyoushiFront: require('@assets/img/home/pingtaiyoushifront.png'),
        logo: require('@assets/img/login/pc-szhgylstpt-logo.png'),
        active_logo: require('@assets/img/login/pc-szhgylstpt-gl-logo.png')
      },
      logoImg: '',
      codeShow: false,
      // 取巧的手段了，按理来说应该从process.env中传递过来，先这样吧
      envMap: {
        'https://md.heng-tai.com.cn': 'wx_callback_dev',
        'https://mt.heng-tai.com.cn': 'wx_callback_test',
        'https://m.heng-tai.com.cn': 'wx_callback_uat',
        'https://m.met-ec.com': 'wx_callback_prd'
      }
    };
  },
  created() {
    this.logoImg = this.img.logo;
  },
  mounted() {
    !(function(a, b, c) {
      function d(a) {
        var c = 'default';
        a.self_redirect === !0
          ? (c = 'true')
          : a.self_redirect === !1 && (c = 'false');
        var d = b.createElement('iframe'),
          e =
            'https://open.weixin.qq.com/connect/qrconnect?appid=' +
            a.appid +
            '&scope=' +
            a.scope +
            '&redirect_uri=' +
            a.redirect_uri +
            '&state=' +
            a.state +
            '&login_type=jssdk&self_redirect=' +
            c +
            '&styletype=' +
            (a.styletype || '') +
            '&sizetype=' +
            (a.sizetype || '') +
            '&bgcolor=' +
            (a.bgcolor || '') +
            '&rst=' +
            (a.rst || '');
        (e += a.style ? '&style=' + a.style : ''),
          (e += a.href ? '&href=' + a.href : ''),
          (d.src = e),
          (d.frameBorder = '0'),
          (d.allowTransparency = 'true'),
          (d.scrolling = 'no'),
          (d.width = '300px'),
          (d.height = '400px');
        var f = b.getElementById(a.id);
        (f.innerHTML = ''), f.appendChild(d);
      }
      a.WxLogin = d;
    })(window, document);
    var obj = new WxLogin({
      id: 'login_container',
      appid: 'wxdc0a4673877769f2',
      scope: 'snsapi_login',
      redirect_uri: encodeURI(
        `https://m.met-ec.com/${
          this.envMap[window.location.origin]
        }&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e/#/login`
      ),
      state: '',
      style: '',
      href: ''
    });
    function getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split('&');
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return false;
    }
    var code = getQueryVariable('code');
    // var code = '0919TsFa1m0PBA0i2fJa1DDYYX29TsFb'
    if (code) {
      cookie.set('wechatCode', code);
      this.loginByOpenPlatformCode(code);
      // return false
      // window.location.href = '/#/login'
    }
  },
  methods: {
    mouseOverIcon() {
      // this.logoImg = this.img.active_logo
    },
    mouseOutIcon() {
      // this.logoImg = this.img.logo
    },
    clickNav(val) {
      this.$refs.fullpage.api.moveTo(val + 1, 0);
    },
    afterLoad(a, b) {
      this.show = b.index === 1 ? true : false; //第二页的文字动画显示隐藏
      this.navIndex = b.index; //当前在第几页
    },
    loginByOpenPlatformCode(code) {
      this.$axios({
        url: loginByOpenPlatformCode,
        method: 'post',
        data: {
          code: code,
          source: 'm_pc_web'
        }
      })
        .then(res => {
          if (res.data.code === '0') {
            this.$store.commit('login', res.data.payload || {});
            // window.location.href = '/'
            let curryCompanyId = cookie.get('companyId') || '';
            if (curryCompanyId === '0') {
              window.location.href = '/#/business/';
            } else {
              window.location.href = '/';
            }
          }
        })
        .catch(err => {
          // reject(err);
        });
    },
    codeShowFn(flag) {
      this.codeShow = flag;
    },
    closeCode() {
      this.codeShow = false;
    }
  }
};
</script>

<style lang="less">
// 右侧小圆点
.ul-box {
  list-style: none;
  position: fixed;
  right: 20px;
  top: 45%;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  li {
    width: 5px;
    height: 5px;
    background: #91b3ff;
    border-radius: 50%;
    margin: 10px;
    cursor: pointer;
    &:nth-child(1) {
      border-color: #91b3ff;
    }
    &:nth-child(2) {
      // border-color: rgba(82, 136, 255);
      border-color: #91b3ff;
    }
    &:nth-child(3) {
      border-color: #91b3ff;
    }
    &:nth-child(4) {
      border-color: #91b3ff;
    }
  }
  .active {
    background: none;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(82, 136, 255);
  }
}
// 第一页
.firstPart {
  background: url('../../../m-front-common/pc/assets/img/home/jvxietong-firstpage.jpg')
    no-repeat;
  background-size: cover;
  overflow: hidden;
  // background-size: 100% 100%;
  .top {
    background: #fbfbfb;
    .box {
      width: 1200px;
      height: 32px;
      line-height: 32px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      // padding: 8px 0;
      font-size: 12px;
      p {
        span {
          cursor: pointer;
        }
      }
    }
  }
  .head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    .box {
      height: 70px;
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      .logo-title {
        width: 286px;
        height: 33px;
      }
      p:first-child {
        font-size: 24px;
      }
      p:last-child {
        span:nth-child(1) {
          font-size: 14px;
        }
        span:nth-child(2) {
          font-size: 16px;
        }
      }
    }
  }
  // .head:hover {
  //   border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  //   background: rgba(255, 255, 255, 0.6);
  //   .box {
  //     p:first-child {
  //       color: #4d84ff;
  //     }
  //     p:last-child {
  //       span:nth-child(1) {
  //         color: #333;
  //       }
  //       span:nth-child(2) {
  //         color: #333;
  //       }
  //     }
  //   }
  // }
  .fristContent {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-top: 100px;
    .introduce {
      width: 555px;
      color: #fff;
      p:first-child {
        font-size: 50px;
        color: #fff;
        letter-spacing: 2px;
      }
      p:nth-child(2) {
        font-size: 24px;
        color: #fff;
        letter-spacing: 0.6px;
        margin: 10px 0 10px 0;
      }
      p:last-child {
        font-size: 18px;
        line-height: 40px;
        letter-spacing: 2px;
      }
    }
  }
}
.secondPart {
  background: url('../../../m-front-common/pc/assets/img/home/secondpage1.png')
    no-repeat;
  background-size: cover;
  color: #fff;
  position: relative;
  overflow: hidden;
  .platformWaves {
    width: 100%;
    height: 65%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    background: url('../../../m-front-common/pc/assets/img/home/pingtaiyoushifront.png')
      no-repeat 100% 100%;
    background-size: contain;
  }
  ._title {
    text-align: center;
    margin: 0 auto;
    padding: 40px 0;
    position: absolute;
    left: 50%;
    margin-left: -70px;
    p:first-child {
      color: #333;
      font-size: 32px;
    }
    p:last-child {
      font-size: 18px;
      color: #999;
      margin-top: 10px;
    }
  }
  .secondContent {
    width: 1200px;
    height: 900px;
    margin: 0 auto;
    position: relative;
    img {
      position: absolute;
      width: 42vw;
      top: 62%;
      margin-top: -40vh;
      left: 50%;
      margin-left: -20vw;
    }
    ul {
      list-style: none;
      width: 100%;
      height: 100%;
      li {
        color: #333;
        p:nth-child(2) {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #999999;
        }
        .title {
          font-size: 20px;
          font-family: PingFangSC-Regular;
        }
      }
      li:nth-child(1) {
        position: absolute;
        top: 33vh;
        left: 7vw;
      }
      li:nth-child(2) {
        position: absolute;
        top: 23vh;
        left: 39vw;
      }
      li:nth-child(3) {
        position: absolute;
        top: 56vh;
        left: 50vw;
      }
      li:nth-child(4) {
        position: absolute;
        top: 89vh;
        left: 40vw;
      }
    }
  }
}
.thirdPart {
  background: #6986ff;
  background-size: cover;
  color: #fff;
  overflow: hidden;
  ._title {
    width: 1200px;
    text-align: center;
    margin: 0 auto;
    padding: 30px 0;
    p:first-child {
      font-size: 32px;
    }
    p:last-child {
      font-size: 18px;
      margin-top: 10px;
    }
  }
  ul {
    list-style: none;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    li {
      width: 300px;
      height: 300px;
      // border: 1px solid #fff;
      box-shadow: 0 4px 15px 0 rgba(20, 50, 177, 0.2);
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      background: #7690ff;
      border-radius: 12px;
      img {
        width: 100px;
        height: auto;
        // height: 100px;
      }
      p {
        text-align: center;
      }
      p:first-child {
        font-size: 18px;
        margin: 15px;
      }
      p:nth-child(2),
      p:nth-child(3),
      p:nth-child(4) {
        line-height: 23px;
        font-size: 12px;
      }
    }
    li:hover {
      background: rgb(167, 184, 255);
    }
  }
  .footer {
    width: 100%;
    padding: 10px;
    background: #000;
    color: #fff;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
.fourthPart {
  background: #0e1421;
  background-size: cover;
  color: #fff;
  // 处理最后一屏幕的样式
  height: auto !important;
  .fp-tableCell {
    height: auto !important;
  }

  overflow: hidden;
  ._title {
    width: 1106px;
    margin: 0 auto;
    padding: 30px 0;
    font-size: 14px;
    color: #757e91;
    letter-spacing: 0;
    line-height: 32px;
    justify-content: space-around;
    display: flex;
  }
  .footer {
    width: 100%;
    padding: 10px;
    background: #000;
    color: #fff;
    text-align: center;
    // position: fixed;
    // bottom: 0;
    // left: 0;
  }
}
// 可以设置不同的进入和离开动画
// 设置持续时间和动画函数
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 2s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(300px);
  opacity: 0;
}
// 适配小屏幕
@media screen and (max-width: 1440px) {
  .firstPart {
    background: url('../../../m-front-common/pc/assets/img/home/jvxietong-firstpage.jpg')
      no-repeat;
    background-size: 100% 100%;
    .top {
      background: #fbfbfb;
      .box {
        width: 1200px;
        height: 32px;
        line-height: 32px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        // padding: 8px 0;
        font-size: 12px;
        p {
          span {
            cursor: pointer;
          }
        }
      }
    }
    .head {
      border-bottom: 1px solid rgba(255, 255, 255, 0.4);
      .box {
        height: 70px;
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        p:first-child {
          font-size: 24px;
        }
        p:last-child {
          span:nth-child(1) {
            font-size: 14px;
          }
          span:nth-child(2) {
            font-size: 16px;
          }
        }
      }
    }
    // .head:hover {
    //   border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    //   background: rgba(255, 255, 255, 0.6);
    //   .box {
    //     p:first-child {
    //       color: #4d84ff;
    //     }
    //     p:last-child {
    //       span:nth-child(1) {
    //         color: #333;
    //       }
    //       span:nth-child(2) {
    //         color: #333;
    //       }
    //     }
    //   }
    // }
    .fristContent {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      margin-top: 30px;
      .introduce {
        width: 555px;
        color: #fff;
        p:first-child {
          font-size: 52px;
          color: #fff;
          letter-spacing: 2px;
        }
        p:nth-child(2) {
          font-size: 24px;
          color: #fff;
          letter-spacing: 0.6px;
        }
        p:last-child {
          font-size: 18px;
          line-height: 40px;
        }
      }
    }
  }
  .secondPart {
    background: url('../../../m-front-common/pc/assets/img/home/secondpage1.png')
      no-repeat;
    background-size: cover;
    color: #fff;
    position: relative;
    .platformWaves {
      width: 100%;
      height: 65%;
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 1;
      background: url('../../../m-front-common/pc/assets/img/home/pingtaiyoushifront.png')
        no-repeat 100% 100%;
      background-size: contain;
    }
    ._title {
      p:first-child {
        font-size: 26px;
      }
      p:last-child {
        font-size: 16px;
      }
    }
    .secondContent {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      position: relative;
      img {
        position: absolute;
        width: 42vw;
        top: 62%;
        margin-top: -40vh;
        left: 50%;
        margin-left: -20vw;
      }
      ul {
        li:nth-child(1) {
          position: absolute;
          top: 35vh;
          left: 17vw;
        }
        li:nth-child(2) {
          position: absolute;
          top: 23vh;
          left: 55vw;
        }
        li:nth-child(3) {
          position: absolute;
          top: 56vh;
          left: 65vw;
        }
        li:nth-child(4) {
          position: absolute;
          top: 89vh;
          left: 57vw;
        }
      }
    }
  }
  .thirdPart {
    background: #6986ff;
    color: #fff;
    overflow: hidden;
    padding: 0;
    ._title {
      width: 1200px;
      text-align: center;
      margin: 0 auto;
      padding: 10px 0;
      p:first-child {
        font-size: 26px;
      }
      p:last-child {
        font-size: 16px;
        margin-top: 0;
      }
    }
    ul {
      list-style: none;
      width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      li {
        width: 300px;
        height: 235px;
        box-shadow: 0 4px 15px 0 rgba(20, 50, 177, 0.2);
        margin: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px;
        background: #7690ff;
        border-radius: 12px;
        img {
          width: 100px;
          height: auto;
        }
        p {
          text-align: center;
        }
        p:first-child {
          font-size: 16px;
          margin: 10px;
        }
        p:nth-child(2),
        p:nth-child(3),
        p:nth-child(4) {
          line-height: 23px;
          font-size: 12px;
        }
      }
      li:hover {
        background: #a7b8ff;
      }
    }
    .footer {
      width: 100%;
      padding: 10px;
      background: #000;
      color: #fff;
      text-align: center;
      position: fixed;
      bottom: 0;
      left: 0;
    }
  }
}
.login-big-box {
  .login_container_middle {
    width: 350px;
    height: 450px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .close_code {
      font-size: 26px;
      float: right;
      cursor: pointer;
      position: relative;
      right: -20px;
      top: -5px;
    }
  }
  .login_container_box {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 100;
  }
  .el-form .el-form-item {
    margin-bottom: 10px;
  }
  .el-form .el-form-item.is-error,
  .el-form .el-form-item.is-required {
    margin-bottom: 20px;
  }
}
</style>
